<script setup lang="ts">
import DemoBox from '@/components/DemoBox/DemoBox.vue';
import BasicUsing from './BasicUsing.vue';
import BasicUsingRaw from './BasicUsing.vue?raw';
import Timeline from './Timeline.vue';
import TimelineRaw from './Timeline.vue?raw';
import PageLayout from '@/components/PageLayout.vue';
import ScrollTrigger from './ScrollTrigger.vue';
import ScrollTriggerCode from './ScrollTrigger.vue?raw';
import ScrollX from './ScrollX.vue';
import ScrollXCode from './ScrollX.vue?raw';
</script>

<template>
    <PageLayout>
        <DemoBox :code="BasicUsingRaw" :libs="['gsap']" title="基本用法">
            <BasicUsing />
            <template #description>
                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
            </template>
        </DemoBox>
        <DemoBox :code="TimelineRaw" :libs="['gsap']" title="时间线">
            <Timeline />
            <template #description>
                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
            </template>
        </DemoBox>
        <DemoBox
            :code="ScrollTriggerCode"
            :libs="['gsap']"
            title="滚动触发动画"
        >
            <ScrollTrigger />
            <template #description>
                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
            </template>
        </DemoBox>
        <DemoBox :code="ScrollXCode" :libs="['gsap']" title="水平滚动">
            <ScrollX />
            <template #description>
                按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
            </template>
        </DemoBox>
    </PageLayout>
</template>
